﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <title>学生注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="./static/css/register.css" rel="stylesheet" type="text/css" media="all" />
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/jquery-confirm.min.css" rel="stylesheet" media="screen" />
    <script href="./static/js/jquery-3.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="./static/js/jquery-confirm.min.js"></script>
    <script type="text/javascript">
    function validate_required(field)
    {
        with (field)
        {
            var name = field.getAttribute("placeholder")
            if (value==null||value==""){
                $.dialog({
                    title: '警告',
                    content: name+"不能为空"
                });
                return false;
            }else{
                return true;
            }
        }
    }
    function validate_userInfo(field){
        with(field){
            var count = 0;
            var ext1 = /[a-z]+/;
            var ext2 = /[A-Z]+/;
            var ext3 = /[0-9]+/;
            var ext4 = /[_]+/;
            var ext5 = /[a-zA-Z]/
            if(ext1.test(value)){count=count+1;}
            if(ext2.test(value)){count=count+1;}
            if(ext3.test(value)){count=count+1;}
            if(ext4.test(value)){count=count+1;}
            if(field.getAttribute('id')==="user") {
                if (count < 3 || !ext5.test(value[0]) || value.length < 6) {
                    $.dialog({
                        title: '警告',
                        content: "用户名至少包含字母大小写、数字、下划线中的三种，字母开始，长度至少6位"
                    });
                    return false;
                }else{
                    return true;
                }
            }
            else{
                if (count<3 || value.length < 8){
                    $.dialog({
                        title: '警告',
                        content: "密码至少包含字母大小写、数字、下划线中的三种，长度至少8位"
                    });
                    return false;
                }else{
                    return true;
                }
            }

        }
    }
    function validate_age(field){
        with (field){
            if (value>22 || value<17)
            {
                $.dialog({
                    title: '警告',
                    content: '年龄应在17~22之间'
                });
                return false;
            }else{
                return true;
            }
        }
    }
    function validate_uid(field){
        with(field){
            ext = /^[0-9]+$/
            if(!ext.test(value)){
                $.dialog({
                    title: '警告',
                    content: "学号为数字类型"
                });
                return false;
            }else{
                return true;
            }
        }
    }
    function validate_phone_or_mail(field){
        with(field){
            if(field.getAttribute("id") === "phone"){
                var ext = /^1[3456789][0-9]{9}$/;
                if(!ext.test(value)){
                    $.dialog({
                        title: '警告',
                        content: "请输入合法的电话号码"
                    });
                    return false;
                }else{
                    return true;
                }
            }
            else if(field.getAttribute("id") === "email"){
                var ext = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if(!ext.test(value)){
                    $.dialog({
                        title: '警告',
                        content: "请输入合法的邮箱"
                    });
                    return false;
                }else{
                    return true;
                }
            }
        }
    }
    function validate_reply(field){
        var pwd;
        with (document.getElementById('passwordInfo')){
            pwd = value;
        }
        with(field){
            if(value !== pwd){
                $.dialog({
                    title: '警告',
                    content: "两次密码输入不一致"
                });
                return false;
            }else{
                return true;
            }
        }
    }
    function validate_form(){
        if (!validate_required(document.getElementById('name')) ||
            !validate_required(document.getElementById('uid'))||
            !validate_required(document.getElementById('school'))||
            !validate_required(document.getElementById('classname'))||
            !validate_age(document.getElementById('age'))||
            !validate_uid(document.getElementById('uid'))||
            !validate_phone_or_mail(document.getElementById('phone'))||
            !validate_phone_or_mail(document.getElementById('email'))||
            !validate_userInfo(document.getElementById('user'))||
            !validate_userInfo(document.getElementById('passwordInfo'))||
            !validate_reply(document.getElementById('passwordReply'))){

            return false;
        }else{
            return true;
        }
    }
    </script>
</head>
<body>
    <div class="main">
        <h1>学生注册</h1>
        <div>
            <input onblur="validate_required(this)" type="text" id="name" placeholder="姓名" >
            <input onblur="validate_uid(this)" type="text" id="uid" placeholder="学号" >
            <input onblur="validate_required(this)" type="text" id="school" placeholder="学院" >
            <input onblur="validate_required(this)" type="text" id="classname" placeholder="班级" >
            <input onblur="validate_age(this)" type="number" id="age" placeholder="年龄" >
            <input onblur="validate_phone_or_mail(this)" type="text" id="phone" placeholder="电话" >
            <input onblur="validate_phone_or_mail(this)" type="email" id="email" placeholder="邮箱" >
            <input onblur="validate_userInfo(this)" type="text" id="user" placeholder="用户名" >
            <input onblur="validate_userInfo(this)" type="password" id="passwordInfo" placeholder="密码" >
            <input onblur="validate_reply(this)" type="password" id="passwordReply" placeholder="确认密码" >
            <div>
                <button id="bt1" class="btn btn-primary" type="button" onclick="submitInfo()">提交</button>
                <a href="{{ url_for('login') }}" style="text-decoration:none"><button id="bt2" class="btn btn-default" type="reset">前往登录</button></a>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function submitInfo(){
        console.log('2')
        if(validate_form()) {
            $.ajax({
                url: "{{url_for('registerIntoDB')}}",
                type: "post",
                data: {
                    name: $("#name").val(),
                    uid: $("#uid").val(),
                    school: $("#school").val(),
                    classname: $("#classname").val(),
                    age: $("#age").val(),
                    phone: $("#phone").val(),
                    email: $("#email").val(),
                    user: $("#user").val(),
                    passwordInfo: $("#passwordInfo").val()
                },
                success: function (data) {
                    console.log(data);
                    if (data['code'] === 1) {
                        $.dialog({
                            title: '成功',
                            content: data['msg']
                        });
                    } else {
                        $.dialog({
                            title: '失败',
                            content: data['msg']
                        });
                    }
                }
            })
        }
    }
</script>
</html>